<template>
  <div class="refrigerator">
    <q-card>
      <q-card-section class="row items-center header">
        <div class="text-h6">制冷机</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>
      <q-separator />
      <q-card-section>
        <q-tabs
          v-model="activeName"
          dense
          class="bg-grey-2 text-teal"
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
        >
          <q-tab
            :name="item.name"
            :label="item.name"
            v-for="item in equipment"
            :key="item.name"
            @click="handleClick(item.name)"
          />
        </q-tabs>
        <!-- <q-separator /> -->
        <q-tab-panels
          v-model="activeName"
          animated
          transition-prev="fade"
          transition-next="fade"
          style="max-height: 600px;"
          class="scroll"
        >
          <q-tab-panel :name="item.name" v-for="item in equipment" :key="item.name">
            <div v-if="item.name != '所有'" style=" padding-left:20px">
              <div style=" height: 150px">
                <el-form
                  v-loading="dialogLoading"
                  style="width: 440px"
                  ref="item"
                  :model="item"
                  label-width="90px"
                  size="mini"
                  inline
                  :label-position="'right'"
                >
                  <el-row>
                    <el-col :span="12">
                      <el-form-item prop="templateId" label="运行状态">
                        {{
                        item.START ? item.START : "停止"
                        }}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="title" label="出水温度">反馈值 {{ item.CHL_ELWT_FB }}℃</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item prop="templateId" label="远程/就地">就地</el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="title" label=" ">设定值 {{ item.CHL_ELWT_SET }}℃</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        prop
                        label="报警与否"
                        :style="{
                          color:
                            (item.CHL_ALM ? item.CHL_ALM : '否') == '是'
                              ? '#ED4A4B'
                              : ''
                        }"
                      >{{ item.CHL_ALM ? item.CHL_ALM : "否" }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop label="是否启用">
                        {{
                        item.CHL_PWR ? (item.CHL_PWR > 0 ? "是" : "否") : "否"
                        }}
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div style="float: right;width:200px; padding-right:50px">
                  <img src="/statics/topo/cold-tools/zlj.png" />
                </div>
              </div>
              <div class="middle">
                <div style="width: 310px; clear: both;float: left">
                  <table class="table" border="0" cellpadding="0" cellspacing="0">
                    <tr
                      style="background-color: #FFFFFF; background-color:#EFEFEF; font-size: 16px"
                    >
                      <td colspan="2">&nbsp;&nbsp;蒸发器</td>
                    </tr>
                    <tr style="background-color: #FFFFFF;">
                      <td width="210">&nbsp;&nbsp;出水温度</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_ELWT }}℃</td>
                    </tr>
                    <tr style="background-color: #f7fbfc;">
                      <td width="210">&nbsp;&nbsp;进水温度</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_EEWT }}℃</td>
                    </tr>
                    <tr style="background-color: #FFFFFF;">
                      <td width="210">&nbsp;&nbsp;冷媒压力</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_EVAPP_SAT }}kPa</td>
                    </tr>
                    <tr style="background-color: #f7fbfc;">
                      <td width="210">&nbsp;&nbsp;冷媒饱和温度</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_EVAPT_SAT }}℃</td>
                    </tr>
                  </table>
                </div>
                <div style="width: 200px; float: right; padding: 30px 120px 0 0"></div>
              </div>

              <div class="middle">
                <div style="width: 310px; clear: both;float: left">
                  <table class="table" border="0" cellpadding="0" cellspacing="0">
                    <tr
                      style="background-color: #FFFFFF; background-color:#EFEFEF; font-size: 16px"
                    >
                      <td colspan="2">&nbsp;&nbsp;冷凝器</td>
                    </tr>
                    <tr style="background-color: #FFFFFF;">
                      <td width="210">&nbsp;&nbsp;出水温度</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_CLWT }}℃</td>
                    </tr>
                    <tr style="background-color: #f7fbfc;">
                      <td width="210">&nbsp;&nbsp;进水温度</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_CEWT }}℃</td>
                    </tr>
                    <tr style="background-color: #FFFFFF;">
                      <td width="210">&nbsp;&nbsp;冷媒压力</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_CONDP_SAT }}kPa</td>
                    </tr>
                    <tr style="background-color: #f7fbfc;">
                      <td width="210">&nbsp;&nbsp;冷媒饱和温度</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_CONDT_SAT }}℃</td>
                    </tr>
                  </table>
                </div>
                <div style="width: 200px; float: right; padding: 30px 120px 0 0"></div>
              </div>
              <div class="middle">
                <div style="width: 310px; clear: both;float: left">
                  <table class="table" border="0" cellpadding="0" cellspacing="0">
                    <tr
                      style="background-color: #FFFFFF; background-color:#EFEFEF; font-size: 16px"
                    >
                      <td colspan="2">&nbsp;&nbsp;电机</td>
                    </tr>
                    <tr style="background-color: #FFFFFF;">
                      <td width="210">&nbsp;&nbsp;功率</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_PWR }}kW</td>
                    </tr>
                    <tr style="background-color: #f7fbfc;">
                      <td width="210">&nbsp;&nbsp;电流</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_AMPS }}A</td>
                    </tr>
                    <tr style="background-color: #FFFFFF;">
                      <td width="210">&nbsp;&nbsp;负荷限定值</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_LOAD_LIMIT }}%</td>
                    </tr>
                    <tr style="background-color: #f7fbfc;">
                      <td width="210">&nbsp;&nbsp;运行时间</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_RUN_HRS }}H</td>
                    </tr>

                    <tr style="background-color: #FFFFFF;">
                      <td width="210">&nbsp;&nbsp;运行频率</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_FRQ }}Hz</td>
                    </tr>
                  </table>
                </div>
                <div style="width: 200px; float: right; padding: 30px 120px 0 0"></div>
              </div>
              <div class="middle">
                <div style="width: 310px; clear: both;float: left">
                  <table class="table" border="0" cellpadding="0" cellspacing="0">
                    <tr
                      style="background-color: #FFFFFF; background-color:#EFEFEF; font-size: 16px"
                    >
                      <td colspan="2">&nbsp;&nbsp;压缩机</td>
                    </tr>
                    <tr style="background-color: #FFFFFF;">
                      <td width="210">&nbsp;&nbsp;油压差</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_OIL_PD }}kPa</td>
                    </tr>
                    <tr style="background-color: #f7fbfc;">
                      <td width="210">&nbsp;&nbsp;油温</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_OIL_T }}℃</td>
                    </tr>
                    <tr style="background-color: #FFFFFF;">
                      <td width="210">&nbsp;&nbsp;启动次数</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_START_COUNT }}次</td>
                    </tr>
                    <tr style="background-color: #f7fbfc;">
                      <td width="210">&nbsp;&nbsp;排气温度</td>
                      <td width="100">&nbsp;&nbsp;{{ item.CHL_DIST }}℃</td>
                    </tr>
                  </table>
                </div>
                <div style="width: 200px; float: right; padding: 30px 120px 0 0"></div>
              </div>
            </div>
            <el-table v-else :data="tableData" :span-method="objectSpanMethod" height="550">
              <el-table-column fixed prop="equipment" label="分类" width="120"></el-table-column>
              <el-table-column prop="name" label="参数名称" width="120"></el-table-column>

              <el-table-column
                v-for="item in runNOs"
                :key="item"
                :prop="`NO` + item"
                :label="item + `#`"
              ></el-table-column>
            </el-table>
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
      <q-separator />
      <q-card-actions align="center">
        <q-btn color="primary" size="xs" label="关 闭" v-close-popup />
      </q-card-actions>
    </q-card>
  </div>
</template>

<script>
import { lastChar, firstChar } from "@/assets/libs/utils.js";
export default {
  props: {
    dialogData: {
      type: Object,
      default: { text: "", dataList: [] }
    },
    index: {
      type: Number,
      default: 0
    },
    nums: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      equipment: [],
      NO: 0,
      dialogLoading: false,
      tableData: [
        {
          equipment: "设备状态",
          name: "运行状态",
          NO1: "停止",
          NO2: "停止",
          NO3: "停止",
          NO4: "停止"
        },
        {
          equipment: "设备状态",
          name: "远程/就地",
          NO1: "就地",
          NO2: "就地",
          NO3: "就地",
          NO4: "就地"
        },
        {
          equipment: "设备状态",
          name: "是否启用",
          NO1: "否",
          NO2: "否",
          NO3: "否",
          NO4: "否"
        },
        {
          equipment: "设备状态",
          name: "报警与否",
          NO1: "否",
          NO2: "否",
          NO3: "否",
          NO4: "否"
        },
        {
          equipment: "蒸发器",
          name: "出水温度(℃)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "蒸发器",
          name: "进水温度(℃)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "蒸发器",
          name: "冷媒压力(kPa)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "蒸发器",
          name: "冷媒饱和温度(℃)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "冷凝器",
          name: "出水温度(℃)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "冷凝器",
          name: "进水温度(℃)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "冷凝器",
          name: "冷媒压力(kPa)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "冷凝器",
          name: "冷媒饱和温度(℃)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },

        {
          equipment: "电机",
          name: "功率(kW)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "电机",
          name: "电流(A)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "电机",
          name: "负荷限定值(%)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "电机",
          name: "运行时间(H)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "电机",
          name: "运行频率(Hz)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "压缩机",
          name: "油压差(kPa)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "压缩机",
          name: "油温(℃)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "压缩机",
          name: "启动次数",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        },
        {
          equipment: "压缩机",
          name: "排气温度(℃)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0
        }
      ],
      activeName: "",
      runNOs: []
    };
  },
  watch: {
    dialogData: {
      handler (val) {
        // console.log('val :', val);
        this.refreshData(val);
      },
      deep: true
    }
  },
  created () {
    if (this.index) {
      this.NO = this.index;
    }
    this.activeName = this.dialogData.text;
    this.refreshData(this.dialogData);
    if (this.nums > 0) {
      for (let i = 1; i <= this.nums; i++) {
        this.runNOs.push(i);
      }
    }
  },
  methods: {
    refreshData (val) {
      let name = val.text.substring(2, 5);
      //   this.activeName = val.text;
      this.equipment = [];

      for (let i = 1; i <= this.nums; i++) {
        let item = {
          name: "",
          CHL_ELWT_FB: 0,
          CHL_ELWT_SET: 0,
          CHL_ELWT: 0,
          CHL_EEWT: 0,
          CHL_EVAPP_SAT: 0,
          CHL_EVAPT_SAT: 0,
          CHL_CEWT: 0,
          CHL_CLWT: 0,
          CHL_CEWT: 0,
          CHL_CEWT: 0,
          CHL_PWR: 0,
          CHL_AMPS: 0,
          CHL_LOAD_LIMIT: 0,
          CHL_RUN_HRS: 0,
          CHL_FRQ_SET: 0,
          CHL_OIL_T: 0,
          CHL_START_COUNT: 0,
          CHL_DIST: 0,
          CHL_FRQ: 0,
          CHL_CONDP_SAT: 0,
          CHL_CONDT_SAT: 0,
          CHL_OIL_PD: 0
        };
        item.name = i + "#" + name;
        this.equipment.push(item);
      }
      let item = {
        name: "所有",
        CHL_ELWT_FB: 0,
        CHL_ELWT_SET: 0,
        CHL_ELWT: 0,
        CHL_EEWT: 0,
        CHL_EVAPP_SAT: 0,
        CHL_EVAPT_SAT: 0,
        CHL_CEWT: 0,
        CHL_CLWT: 0,
        CHL_CEWT: 0,
        CHL_CEWT: 0,
        CHL_PWR: 0,
        CHL_AMPS: 0,
        CHL_LOAD_LIMIT: 0,
        CHL_RUN_HRS: 0,
        CHL_FRQ_SET: 0,
        CHL_OIL_T: 0,
        CHL_START_COUNT: 0,
        CHL_DIST: 0,
        CHL_FRQ: 0,
        CHL_CONDP_SAT: 0,
        CHL_CONDT_SAT: 0,
        CHL_OIL_PD: 0
      };
      this.equipment.push(item);
      this.getSketchMap(this.NO);
    },
    handleClick (name) {
      this.activeName = name;
      console.log("activeName :", this.activeName);
      if (name == "所有") {
        // return;
        this.NO = this.equipment.length + 1;
      } else {
        let tindex = firstChar(name);
        this.NO = parseInt(tindex);
      }
      this.getSketchMap(this.NO);
    },
    getSketchMap (NO) {
      let address,
        val = 0;
      for (let i = 0; i < this.dialogData.dataList.length; i++) {
        let obji = this.dialogData.dataList[i];
        address = obji.Address;
        val = obji.val;
        if (!address) {
          continue;
        }

        if (address.indexOf("CHL" + NO + "_") > -1) {
          this.equipment[NO - 1].START = val != 0 ? "运行" : "停止";
          if (
            address.indexOf("CHL" + NO + "_ALM") > -1 &&
            address.length < 10
          ) {
            this.equipment[NO - 1].CHL_ALM = val != 0 ? "是" : "否";
          } else if (
            address.indexOf("CHL" + NO + "_FRQ") > -1 &&
            address.length == 8
          ) {
            this.equipment[NO - 1].CHL_FRQ = val;
          } else if (address.indexOf("CHL" + NO + "_EEWT") > -1) {
            this.equipment[NO - 1].CHL_EEWT = val;
          } else if (
            address.indexOf("CHL" + NO + "_ELWT") > -1 &&
            address.length == 9
          ) {
            this.equipment[NO - 1].CHL_ELWT = val;
          } else if (address.indexOf("CHL" + NO + "_EVAPP_SAT") > -1) {
            this.equipment[NO - 1].CHL_EVAPP_SAT = val;
          } else if (address.indexOf("CHL" + NO + "_EVAPT_SAT") > -1) {
            this.equipment[NO - 1].CHL_EVAPT_SAT = val;
          } else if (address.indexOf("CHL" + NO + "_CEWT") > -1) {
            this.equipment[NO - 1].CHL_CEWT = val;
          } else if (address.indexOf("CHL" + NO + "_CLWT") > -1) {
            this.equipment[NO - 1].CHL_CLWT = val;
          } else if (address.indexOf("CHL" + NO + "_CONDT_SAT") > -1) {
            this.equipment[NO - 1].CHL_CONDT_SAT = val;
          } else if (address.indexOf("CHL" + NO + "_CONDP_SAT") > -1) {
            this.equipment[NO - 1].CHL_CONDP_SAT = val;
          } else if (address.indexOf("CHL" + NO + "_ELWT_FB") > -1) {
            this.equipment[NO - 1].CHL_ELWT_FB = val;
          } else if (
            address.indexOf("CHL" + NO + "_ELWT_SET") > -1 &&
            address.length == 13
          ) {
            this.equipment[NO - 1].CHL_ELWT_SET = val;
          } else if (address.indexOf("CHL" + NO + "_OIL_PD") > -1) {
            this.equipment[NO - 1].CHL_OIL_PD = val;
          } else if (address.indexOf("CHL" + NO + "_OIL_T") > -1) {
            this.equipment[NO - 1].CHL_OIL_T = val;
          } else if (address.indexOf("CHL" + NO + "_START_COUNT") > -1) {
            this.equipment[NO - 1].CHL_START_COUNT = val;
          } else if (address.indexOf("CHL" + NO + "_DIST") > -1) {
            this.equipment[NO - 1].CHL_DIST = val;
          } else if (address.indexOf("CHL" + NO + "_PWR") > -1) {
            this.equipment[NO - 1].CHL_PWR = val;
          } else if (address.indexOf("CHL" + NO + "_AMPS") > -1) {
            this.equipment[NO - 1].CHL_AMPS = val;
          } else if (address.indexOf("CHL" + NO + "_LOAD_LIMIT") > -1) {
            this.equipment[NO - 1].CHL_LOAD_LIMIT = val;
          } else if (address.indexOf("CHL" + NO + "_RUN_HRS") > -1) {
            this.equipment[NO - 1].CHL_RUN_HRS = val;
          } else if (address.indexOf("CHL" + NO + "_OIL_PD") > -1) {
            this.equipment[NO - 1].CHL_OIL_PD = val;
          } else if (address.indexOf("CHL" + NO + "_REM_LOC") > -1) {
            if (obji.val > 0) {
              this.equipment[NO - 1].WP_REM_LOC = "就地";
            }
          }
        }
        if (address.substring(0, 3) == "CHL") {
          this.queryTable(address, val);
        }
      }
    },
    queryTable (address, val) {
      let NO = address.substring(3, 4);
      let NOdata = "NO" + NO;
      // if (address.indexOf('CHL' + NO + '_ALM') > -1) {
      //     debugger
      // }
      //运行状态
      if (address.indexOf("CHL" + NO + "_PWR") > -1) {
        this.tableData[0][NOdata] = val != 0 ? "运行" : "停止";
      }
      //远程/就地
      //   if (address.indexOf('CHL') > -1) {
      this.tableData[1][NOdata] = "就地";
      // }
      //是否启用
      if (address.indexOf("CHL" + NO + "_PWR") > -1) {
        this.tableData[2][NOdata] = val != 0 ? "是" : "否";
      }
      //报警与否
      if (address.indexOf("CHL" + NO + "_ALM") > -1 && address.length < 10) {
        this.tableData[3][NOdata] = val != 0 ? "是" : "否";
      }
      //出水温度(℃)
      else if (
        address.indexOf("CHL" + NO + "_ELWT") > -1 &&
        address.length == 9
      ) {
        this.tableData[4][NOdata] = val;
      }
      //进水温度(℃)
      else if (address.indexOf("CHL" + NO + "_EEWT") > -1) {
        this.tableData[5][NOdata] = val;
      }
      //液煤压力
      else if (address.indexOf("CHL" + NO + "_EVAPP_SAT") > -1) {
        this.tableData[6][NOdata] = val;
      }
      //冷煤饱和度
      else if (address.indexOf("CHL" + NO + "_EVAPT_SAT") > -1) {
        this.tableData[7][NOdata] = val;
      }
      //出水温度(℃)
      else if (address.indexOf("CHL" + NO + "_CLWT") > -1) {
        this.tableData[8][NOdata] = val;
      }
      //进水温度(℃)
      else if (address.indexOf("CHL" + NO + "_CEWT") > -1) {
        this.tableData[9][NOdata] = val;
      }
      //液煤压力
      else if (address.indexOf("CHL" + NO + "_CONDP_SAT") > -1) {
        this.tableData[10][NOdata] = val;
      }
      //冷煤饱和度
      else if (address.indexOf("CHL" + NO + "_CONDT_SAT") > -1) {
        this.tableData[11][NOdata] = val;
      }
      //出水温度(℃)
      else if (address.indexOf("CHL" + NO + "_PWR") > -1) {
        this.tableData[12][NOdata] = val;
      }
      //进水温度(℃)
      else if (address.indexOf("CHL" + NO + "_AMPS") > -1) {
        this.tableData[13][NOdata] = val;
      }
      //液煤压力
      else if (address.indexOf("CHL" + NO + "_LOAD_LIMIT") > -1) {
        this.tableData[14][NOdata] = val;
      }
      //冷煤饱和度
      else if (address.indexOf("CHL" + NO + "_RUN_HRS") > -1) {
        this.tableData[15][NOdata] = val;
      } else if (
        address.indexOf("CHL" + NO + "_FRQ") > -1 &&
        address.length == 8
      ) {
        this.tableData[16][NOdata] = val;
      }
      //出水温度(℃)
      else if (address.indexOf("CHL" + NO + "_OIL_PD") > -1) {
        this.tableData[17][NOdata] = val;
      }
      //进水温度(℃)
      else if (address.indexOf("CHL" + NO + "_OIL_T") > -1) {
        this.tableData[18][NOdata] = val;
      }
      //液煤压力
      else if (address.indexOf("CHL" + NO + "_START_COUNT") > -1) {
        this.tableData[19][NOdata] = val;
      }
      //冷煤饱和度
      else if (address.indexOf("CHL" + NO + "_DIST") > -1) {
        this.tableData[20][NOdata] = val;
      }
      //   console.log(JSON.stringify(this.tableData));
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (row.equipment == "压缩机") {
        if (columnIndex === 0) {
          if (rowIndex % 17 === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      } else if (row.equipment == "电机") {
        if (columnIndex === 0) {
          if (rowIndex % 12 === 0) {
            return {
              rowspan: 5,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      } else {
        if (columnIndex === 0) {
          if (rowIndex % 4 === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.refrigerator {
  width: 760px;
  max-width: 80vw;
  .q-card {
    width: 760px;
  }
  /deep/ .q-panel.scroll {
    overflow-x: hidden;
  }
  /deep/ .q-btn {
    padding: 0px 12px;
  }
}
.middle {
  border-radius: 5px;
  width: 310px;
  height: 200px;
  background-color: #ffffff;
  float: left;
  padding-left: 10px;
}
.el-form {
  width: 500px;
  float: left;
}
.el-tabs__nav-wrap {
  background-color: red !important;
  margin-left: 20px;
}
.is-top {
  background-color: red !important;
  margin-left: 20px;
}

/deep/ .el-tabs__nav-wrap {
  background-color: #efefef;
  margin-left: 0px;
}
.table {
  line-height: 35px;
  border: 1px solid #eee;
  border-radius: 5px;
}
/deep/ .el-table__header tr,
/deep/ .el-table__header th {
  padding: 0;
  height: 46px;
  background: #ebeef5;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
/deep/ .q-card__section.header {
  padding: 8px 16px;
}
</style>
